<div class="mask-box">
  <%= form_for(@finance, :url => admin_finance_path(@finance), method: :patch, remote:true)  do |f|%>
    <div class="mask-head">
      <h4>编辑</h4>
      <span></span>
    </div>
    <div class="mask-con">
      <div class="mask-marc">
        <ul>
          <li>
            <span>成本备注:</span><%= f.text_field :remark %>
        </li>
        <li class="fina-cost">
          <span>成本分店:</span>
          <%= f.hidden_field :studio_id %>
          <div class="single-box">
            <div class="single-downbtn">
              <span data_id="<%= @finance.studio_id %>"><%= @finance.studio.name %></span> 
              <em></em>
            </div>
            <div class="single-dropdown">
              <em></em>
              <input type="text" placeholder="搜索">
              <ul>
                <% @studios.each do |stu| %>
                  <li data_id="<%= stu.id %>"><%= stu.name %></li>
                <%end%>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <span>成本费用:</span>
          <%= f.text_field :amount %>
          <em>元</em>
        </li>
        </ul>
      </div>
    </div>
    <div ><%= f.submit '确认', :class => "mask-confirm" %></div>
  <%end%>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
$(".single-downbtn").on("click", function() {
  if ($(this).next(".single-dropdown").hasClass("menuopen")) {
    $(this).next(".single-dropdown").removeClass("menuopen");
  } else {
    $(this).next(".single-dropdown").addClass("menuopen");
    $(this).parent().hover(function() {

    }, function() {
      $(this).children(".single-dropdown").removeClass("menuopen");
    });
    $(".menuopen li").on("click", function() {
      $(this).parent().parent().removeClass("menuopen");
      $(this).parent().parent().parent().find("span").text($(this).text());
      $(this).parent().parent().find("input").val("");
      $(".single-dropdown li").removeClass("mul-hide");
      $("#finance_studio_id").val($(this).attr("data_id"));
    });
    $(this).next("div").find("input").on('input',function(){ 
      if ($(this).val() != "") {
          $(".single-dropdown li").addClass("mul-hide");
       } else {
        $(".single-dropdown li").removeClass("mul-hide");
      }
    })
      
  };
});
</script>
